<template>
	<view class="pageContent">

		<view class="loginM" v-if="!token">
			<image class="loginMIco" :src="images +'/loginMIco.png'" />
			<button class="btOne loginMBt" @click="loginRed">请先验证身份登录</button>
		</view>
		<view class="remote" v-if="token">
			<view class="inputMain">
				输入设备PID/门禁名称/项目关键词查找
			</view>
			<view class="remoteMa">
				<view class="remoteMain" @click="selectTap(index)" v-for="(item,index) in doorList" :key="index">
					<view class="remoteBac" :style="{background:item.color}">
						<image class="remoteIco" :src="item.icon" />
						<view class="numCount" v-if="index==1 && installNum">{{installNum}}</view>
						<view class="numCount" v-if="0">12</view>
					</view>
					<view class="remoteGate">{{item.name || '设备投放'}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				title: '123',
				token: 0,
				doorList: [{
						name: '设备投放',
						icon: config.localImages + '/yw-device1.png',
						color: 'linear-gradient(180deg, #6A7AFA 0%, #4A0ABD 100%)'
					},

					{
						name: '我的工单',
						icon: config.localImages + '/yw-device3.png',
						color: 'linear-gradient(180deg, #06B12A 0%, #0FA4B4 100%)'
					},
					{
						name: '设备管理',
						icon: config.localImages + '/yw-device2.png',
						color: 'linear-gradient(180deg, #FC7D07 0%, #FA0525 100%)'
					}
				],
				installNum: 0,
			}
		},
		onLoad() {
			console.log('index-onLoad')
		},
		onShow() {
			var token = wx.getStorageSync('token')
			this.token = token
			if (token) {
				this.installTaskDetailsList()
			}
		},
		methods: {
			selectTap(index) {
				switch (index) {
					case 0:
						wx.navigateTo({
							url: '/pages/index/install'
						})
						break;
					case 1:
						wx.navigateTo({
							url: '/pages/index/myOrder'
						})
						break;
					case 2:
						wx.navigateTo({
							url: '/pages/index/deviceManager'
						})
						break;
					default:
						break;
				}
			},
			loginRed() {
				wx.redirectTo({
					url: '/pages/index/login'
				})
			},
			async installTaskDetailsList() {
				var url = '/UserServer/mini/install/installTaskDetailsList'
				var params = {
					"queryStatus": 1,
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				this.installNum = param.length
			},

		},

	}
</script>

<style>
	.pageContent {}

	.loginM {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 250rpx 0rpx 0rpx 0rpx;
	}

	.loginMIco {
		width: 240rpx;
		height: 270rpx;
	}

	.loginMBt {
		width: 70%;
		margin: 50rpx 0rpx 0rpx 0rpx;
	}

	.remote {
		/* text-align: center; */
	}

	.inputMain {
		/* width: 100%; */
		border: 1rpx solid #666;
		color: #C9C9C9;
		/* width: 750rpx; */
		background: #FFFFFF;
		border-radius: 4rpx;
		margin: 30rpx 30rpx 0rpx 30rpx;
		padding: 0rpx 30rpx 0rpx 30rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #C9C9C9;
		line-height: 60rpx;
	}

	.remoteMa {
		text-align: center;
		padding: 50rpx 0rpx 0rpx 0rpx;
		/* border: 1px solid #f00; */
	}

	.remoteMain {
		display: inline-block;
		/* width: 120rpx; */
		/* height: 120rpx; */
		padding: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 120rpx;
		/* text-align: center; */
		border-radius: 10rpx;
		font-size: 30rpx;
		/* border: 1px solid #666; */
	}

	.remoteMain:nth-child(3n+1) {
		margin: 0rpx 0rpx 0rpx 0rpx;
		/* color: red; */
	}

	.remoteBac {
		position: relative;
		width: 130rpx;
		height: 130rpx;
		background: #007AFF;
		border-radius: 10rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.remoteIco {
		width: 80rpx;
		height: 60rpx;
		margin-top: 34rpx;

	}

	.numCount {
		position: absolute;
		right: -6rpx;
		top: -6rpx;
		/* width: 34rpx; */
		height: 36rpx;
		font-size: 24rpx;
		line-height: 28rpx;
		color: #FFFFFF;
		background: #007AFF;
		border: #007AFF solid 1rpx;
		border-radius: 18rpx;
		text-align: center;
		padding: 0rpx 12rpx 0rpx 12rpx;
		z-index: 99;
	}
</style>
